<template>
  <Back />
  <div class="p-20px bg-#FBFBFB min-h-100vh box-border">
    <div class="text-center font-size-2.4rem">{{ $t('invite.given.title') }}</div>

    <div class="m-t8px">
      <van-divider>{{ $t('invite.given.link') }}</van-divider>
    </div>

    <div class="flex items-center">
      <div class="flex-1"><textarea class="input" :value="link" readonly /></div>
    </div>
    <div class="text-center m-t-20px">
      <van-button :loading="loading" block round color="#3AA1A2" @click="copy">
        {{ $t('invite.given.copy') }}
      </van-button>
    </div>

    <div class="box m-t20px">
      <van-divider>{{ $t('invite.given.step') }}</van-divider>
      <van-steps :active="-1">
        <van-step>
          <template #inactive-icon>
            <van-icon name="share-o" />
          </template>
          <template #default>
            <div class="w-50px m-t--10px">{{ $t('invite.given.step1') }}</div>
          </template>
        </van-step>
        <van-step inactive-icon="share-o">
          <template #inactive-icon>
            <van-icon name="vip-card-o" />
          </template>
          <template #default>
            <div class="w-50px m-t--10px">{{ $t('invite.given.step2') }}</div>
          </template>
        </van-step>
        <van-step inactive-icon="share">
          <template #inactive-icon>
            <van-icon name="certificate" />
          </template>
          <template #default>
            <div class="w-50px m-t--10px">{{ $t('invite.given.step3') }}</div>
          </template>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>
<script setup lang="ts">
const { t } = useI18n()

const router = useRouter()
const route = useRoute()

const link = ref('')
const loading = ref(false)

onMounted(() => {
  const id = route.query && route.query.id
  if (id) {
    apis.api.userShopGivenLink({ couponId: id as string }, loading).then(d => (link.value = d))
  } else {
    router.back()
  }
})

const copy = async () => {
  try {
    await navigator.clipboard.writeText(link.value)
    showToast(t('invite.invite.copyOk'))
  } catch (err) {
    showToast(t('invite.invite.copyFail'))
  }
}
</script>
<style lang="scss" scoped>
.input {
  resize: none;
  font-size: 1.4rem;
  color: #666666;
  line-height: 1.6rem;
  margin-left: 6px;
  width: 95%;
  height: 6rem;
}

.box {
  padding: 20px 10px;
  background-color: #ffffff;
  border-radius: 6px;
}
.msg {
  padding: 8px 16px;
  background: #f6f6f6;
  border-radius: 10px 10px 10px 2px;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
